<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common2 :: common_head(~{::title},~{},~{})">
    <meta charset="UTF-8">
    <title>LogMongo页面</title>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function () {
        var model = Ext.create('Ext.data.Model', {
            fields: [
                {
                    type: 'hidden',
                    name: 'id' //id
                },
                {
                    type: 'string',
                    name: 'input' //输入
                },
                {
                    type: 'string',
                    name: 'output' //输出
                }
            ]
        });

        var store = Ext.create('Ext.data.Store', {
            model: model,
            autoLoad: true,
            pageSize: 20,
            proxy: {
                type: 'ajax',
                api: {
                    read: GS.global.ctxPath + '/logMongo/getMongoLog'
                },
                actionMethods: {
                    read: 'POST', // Store设置请求的方法，与Ajax请求有区别
                },
                /**设置读取方式*/
                reader: {
                    type: 'json',
                    rootProperty: 'data.records',
                    totalProperty: 'data.total'
                }
            }
        });

        var action = {
            ADD: 'add',
            UPDATE: 'update',
            CHECK: 'check'
        };

        /**分页*/
        var pageCombo = Ext.create('Ext.form.ComboBox', {
            name: 'pagesize',
            hiddenName: 'pagesize',
            store: new Ext.data.ArrayStore({
                fields: ['text', 'value'],
                data: [
                    ['20', 20], ['50', 50]
                ]
            }),
            valueField: 'value',
            displayField: 'text',
            emptyText: 20,
            width: 50
        });

        //添加下拉显示条数菜单选中事件
        pageCombo.on("change", function (comboBox) {
            var pagingToolbar = Ext.getCmp('pagingbar');
            pagingToolbar.pageSize = parseInt(comboBox.getValue());
            var itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage
            store.pageSize = itemsPerPage;
            store.loadPage(1);
        });

        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Mongo日志',
            tbar: [
                {
                    text: '查看',
                    handler: function () {
                        addAdjustVersion(action.CHECK);
                    }
                },
                // {
                //     text: '编辑',
                //     handler: function () {
                //         addAdjustVersion(action.UPDATE);
                //     }
                // },
                // {
                //     text: '删除',
                //     handler: function () {
                //         deleteAdjustVersion();
                //     }
                // }
            ],
            dockedItems: [{
                id: 'pagingbar',
                xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true,
                autoScroll: true,
                beforePageText: "第",// update
                afterPageText: "页  共 {0} 页",// update
                firstText: "第一页",
                prevText: "上一页",// update
                nextText: "下一页",
                lastText: "最后页",
                refreshText: "刷新",
                displayMsg: "显示 {0} - {1}条，共 {2} 条",// update
                emptyMsg: '没有数据',
                items: ['-', '每页显示', pageCombo, '条']//此处是将创建的combobox添加到工具栏中
            }],
            store: store,
            columns: [
                {
                    xtype: 'rownumberer',
                    header: '行号',
                    renderer: function (value, metadata, record, rowIndex) {
                        return (rowIndex + 1);
                    },
                    width: 60,
                    align: 'center',
                },
                {
                    text: '输入',
                    flex:10,
                    dataIndex: 'input'
                },
                {
                    text: '输出',
                    flex:10,
                    dataIndex: 'output'
                },
            ],
            listeners: {
                rowdblclick: function () {
                    addAdjustVersion(action.CHECK);
                }
            }
        });

        new Ext.Viewport({
            layout: 'fit',
            items: [grid]
        });


        var form = Ext.create('Ext.form.Panel', {
            border: false,
            layout: {type: 'auto', align: 'right'},
            buttonAlign: 'center',
            defaultType: 'textfield',
            bodyStyle: {
                padding: '20px'
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'hiddenfield',
                            name: 'id',
                        }, {
                            xtype: 'hiddenfield',
                            name: 'actionType',
                        },
                        {
                            xtype: 'textareafield',
                            fieldLabel: '输入',
                            name: 'input',
                            flex: 10,
                            margin: '5 5 5 5',
                            allowBlank: false,
                            height: 140
                        }
                    ]
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textareafield',
                            fieldLabel: '输出',
                            name: 'output',
                            flex: 10,
                            margin: '15 5 5 5',
                            allowBlank: false,
                            height: 140
                        }
                    ]
                },
            ]
        });

        var profileWindow = Ext.create('Ext.Window', {
            title: 'Mongo日志',
            width: 600,
            height: 450,
            resizable: false,
            modal: true,
            items: [form],
            maximizable: true,
            minimizable: true,
            closeAction: 'hide',//设置点击关闭按钮为隐藏,不设置，window不能重复利用
            buttons: [{
                xtype: 'button', text: '确定', handler: function () {
                    saveAdjustVersion();
                }
            }, {
                xtype: 'button', text: '取消', handler: function () {
                    closeWindow();
                }
            }]
        });

        function addAdjustVersion(actionType) {
            var title;
            form.getForm().findField('actionType').setValue(actionType);
            setModalReadOnly(false);
            if (actionType === action.ADD) {
                title = '新增';
            } else if (actionType === action.UPDATE) {
                title = '修改';
                var record = getSelectionRecord();
                if (!record) {
                    Ext.MessageBox.alert('提示', '只能选中一条数据进行处理!');
                    return;
                }
                // 为模态窗赋值
                form.getForm().setValues(record.data);
            } else if (actionType === action.CHECK) {
                title = '查看';
                var record = getSelectionRecord();
                if (!record) {
                    Ext.MessageBox.alert('提示', '只能选中一条数据进行处理!');
                    return;
                }
                // 为模态窗赋值
                form.getForm().setValues(record.data);
                setModalReadOnly(true);
            }
            /**设置标题**/
            profileWindow.setTitle(title);
            profileWindow.show();
        }


        function setModalReadOnly(flag) {
            form.getForm().getFields().each(function (field) {
                //设置只读
                field.setReadOnly(flag);
            });
            var saveButton = profileWindow.query('.button')[0];
            if (flag) {
                saveButton.hide();
            } else {
                saveButton.show();
            }
        }

        // 关闭模态窗，清空模态窗中表单数据
        function closeWindow() {
            form.getForm().reset();
            profileWindow.hide();
        }

        /***
         * 获取选中的数据,只提供单选模式
         */
        function getSelectionRecord() {
            var records = grid.selModel.getSelection();
            if (records.length === 1) {
                return records[0];
            } else {
                return null;
            }
        }

        function saveAdjustVersion() {
            var form_ = form.getForm();
            var actionType = form_.findField('actionType').getValue();
            form.getForm().findField('modifiedTime').setValue(new Date());
            if (form_.isValid()) {
                var url, msg;
                if (actionType === action.UPDATE) {
                    url = GS.global.ctxPath + "/adjustVersion/update";
                    msg = '更新成功!';
                } else if (actionType === action.ADD) {
                    url = GS.global.ctxPath + "/adjustVersion/add";
                    msg = '添加成功!';
                }
                form_.submit({
                    method: 'POST',
                    url: url,
                    waitMsg: '请稍等,正在执行',
                    params: form_.getValues(),
                    success: function (form, action) {
                        closeWindow();
                        grid.store.reload();
                        Ext.MessageBox.alert('提示', msg);
                    },
                    failure: function (form, action) {
                        Ext.MessageBox.alert('提示', "操作失败");
                    }

                })
            }
        }

        // 删除配置分析文件
        function deleteAdjustVersion() {
            var record = getSelectionRecord();
            if (!record) {
                Ext.MessageBox.alert('提示', '只能选中一条数据进行处理!');
                return;
            }
            Ext.Msg.show({
                title: '提示',
                message: '是否确认删除？',
                buttons: Ext.Msg.YESNO,
                icon: Ext.Msg.QUESTION,
                fn: function (btn) {
                    if (btn === 'yes') {
                        Ext.Ajax.request({
                            method: 'POST',
                            url: GS.global.ctxPath + '/adjustVersion/delete',
                            params: {
                                'id': record.get("adjustId")
                            },
                            success: function (response, config) {
                                Ext.Msg.alert('提示', '删除成功!');
                                grid.store.reload();//重新加载数据
                            },
                            failure: function () {
                                Ext.Msg.alert('提示', '删除失败!');
                            }
                        });
                    }

                }
            })
        }
    });
</script>
</body>
</html>